{% if message.tags == 'error' %}
    <div class="flex items-center gap-2 p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800"
         role="alert">
        <i class="fa-solid fa-circle-info flex-shrink-0 inline text-xl"></i>
        <span class="sr-only">Info</span>
        <div>{{ message|safe }}</div>
    </div>
{% elif message.tags == 'info' %}
    <div class="flex items-center gap-2 p-4 mb-4 text-sm text-blue-800 border border-blue-300 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800"
         role="alert">
        <i class="fa-solid fa-circle-info flex-shrink-0 inline text-xl"></i>
        <span class="sr-only">Info</span>
        <div>{{ message|safe }}</div>
    </div>
{% elif message.tags == 'success' %}
    <div class="flex items-center gap-2 p-4 mb-4 text-sm text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800"
         role="alert">
        <i class="fa-solid fa-circle-info flex-shrink-0 inline text-xl"></i>
        <span class="sr-only">Info</span>
        <div>{{ message|safe }}</div>
    </div>
{% elif message.tags == 'warning' %}
    <div class="flex items-center gap-2 p-4 mb-4 text-sm text-yellow-800 border border-yellow-300 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-800"
         role="alert">
        <i class="fa-solid fa-circle-info flex-shrink-0 inline text-xl"></i>
        <span class="sr-only">Info</span>
        <div>{{ message|safe }}</div>
    </div>
{% else %}
    <div class="flex items-center gap-2 p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600"
         role="alert">
        <i class="fa-solid fa-circle-info flex-shrink-0 inline text-xl"></i>
        <span class="sr-only">Info</span>
        <div>{{ message|safe }}</div>
    </div>
{% endif %}